<template>
	<div class="topandleft" id="topandleft" style="position: fixed; top: 0; left: 0; z-index: 999; width: 100%; padding: 0.2rem; height: 1rem; background: #fff;">
    <div class="flexbc">
      <div class="flex">
        <div  @click="showPopup"><img src="../../static/img/tl1.png" style="width: 0.5rem; height: 0.5rem; margin-right: 0.2rem;"></div>
        <!-- <div><img src="../../static/img/tl2.png" style="width: 0.5rem; height: 0.5rem;"></div> -->
      </div>
      <!-- <div>
        <div><img src="../../static/img/toux.png" style="width: 0.5rem; height: 0.5rem;"></div>
      </div> -->
    </div>

    <van-popup v-model="show" position="left">
      <div style="min-height: 100vh; width: 5rem; padding: 0.3rem; background: rgb(246, 248, 251);">
        <div style="background: #fff; padding: 0.3rem 0.3rem 0; border-radius: 0.2rem;">
          <div class="flex">
            <div><img src="../../static/img/shangpinguanli.svg" style="width: 0.35rem; height: 0.35rem;"></div>
            <div style="flex: 1; margin-left: 0.25rem;">
              <div style="height: 0.9rem; font-size: 0.28rem;">
                商品管理
              </div>
              <div style="line-height: 0.9rem; border-top: 1px #eaeaea solid; width: 100%;font-size: 0.28rem;">
                <router-link to="/shangpinguanli/gongyingshangshangpin">
                  <div class="flexbc">
                    <div>供应商商品</div>
                    <div><i class="el-icon-arrow-right"></i></div>
                  </div>
                </router-link>
              </div>
              <div style="line-height: 0.9rem; border-top: 1px #eaeaea solid; width: 100%;font-size: 0.28rem;">
                <router-link to="/shangpinguanli/zaishoushangpin">
                  <div class="flexbc">
                    <div>在售商品</div>
                    <div><i class="el-icon-arrow-right"></i></div>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <div style="background: #fff; padding: 0.3rem 0.3rem 0; border-radius: 0.2rem; margin-top: 0.2rem;">
          <div class="flex">
            <div><img src="../../static/img/zhibotuiguang.svg" style="width: 0.35rem; height: 0.35rem;"></div>
            <div style="flex: 1; margin-left: 0.25rem;">
              <div style="height: 0.9rem; font-size: 0.28rem;">
                直播推广
              </div>
              <div style="line-height: 0.9rem; border-top: 1px #eaeaea solid; width: 100%;font-size: 0.28rem;">
                <router-link to="/zhibotuiguang/duoshangpin">
                  <div class="flexbc">
                    <div>多商品页</div>
                    <div><i class="el-icon-arrow-right"></i></div>
                  </div>
                </router-link>
              </div>
              <div style="line-height: 0.9rem; border-top: 1px #eaeaea solid; width: 100%;font-size: 0.28rem;">
                <router-link to="/zhibotuiguang/danshangpin">
                  <div class="flexbc">
                    <div>单商品页</div>
                    <div><i class="el-icon-arrow-right"></i></div>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </div>

        <div style="background: #fff; padding: 0.3rem; border-radius: 0.2rem; margin-top: 0.2rem;">
          <div class="flex" @click="go('/fenxiaoshangguanli')">
            <div><img src="../../static/img/fenxiaoshangguanli.svg" style="width: 0.35rem; height: 0.35rem;"></div>
            <div style="flex: 1; margin-left: 0.25rem;">
              <div style=" font-size: 0.28rem;">
                <div class="flexbc">
                  <div>分销商管理</div>
                  <div><i class="el-icon-arrow-right"></i></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="background: #fff; padding: 0.3rem 0.3rem 0; border-radius: 0.2rem; margin-top: 0.2rem;">
          <div class="flex">
            <div><img src="../../static/img/dingdanguanli.svg" style="width: 0.35rem; height: 0.35rem;"></div>
            <div style="flex: 1; margin-left: 0.25rem;">
              <div style="height: 0.9rem; font-size: 0.28rem;">
                订单管理
              </div>
              <div style="line-height: 0.9rem; border-top: 1px #eaeaea solid; width: 100%;font-size: 0.28rem;">
                <router-link to="/dingdanguanli/dingdanchuli">
                  <div class="flexbc">
                    <div>我的订单</div>
                    <div><i class="el-icon-arrow-right"></i></div>
                  </div>
                </router-link>
              </div>
              <div style="line-height: 0.9rem; border-top: 1px #eaeaea solid; width: 100%;font-size: 0.28rem;">
                <router-link to="/dingdanguanli/fenxiaoshangdingdan">
                  <div class="flexbc">
                    <div>分销商订单</div>
                    <div><i class="el-icon-arrow-right"></i></div>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </div>

        <div style="background: #fff; padding: 0.3rem 0.3rem 0; border-radius: 0.2rem; margin-top: 0.2rem;">
          <div class="flex">
            <div><img src="../../static/img/caiwuguanli.svg" style="width: 0.35rem; height: 0.35rem;"></div>
            <div style="flex: 1; margin-left: 0.25rem;">
              <div style="height: 0.9rem; font-size: 0.28rem;">
                财务管理
              </div>
              <div style="line-height: 0.9rem; border-top: 1px #eaeaea solid; width: 100%;font-size: 0.28rem;">
                <router-link to="/yongjin/yongjinguanli">
                  <div class="flexbc">
                    <div>佣金结算订单管理</div>
                    <div><i class="el-icon-arrow-right"></i></div>
                  </div>
                </router-link>
              </div>
              <div style="line-height: 0.9rem; border-top: 1px #eaeaea solid; width: 100%;font-size: 0.28rem;">
                <router-link to="/yongjin/yongjinjilu">
                  <div class="flexbc">
                    <div>佣金结算记录</div>
                    <div><i class="el-icon-arrow-right"></i></div>
                  </div>
                </router-link>
              </div>
              <div style="line-height: 0.9rem; border-top: 1px #eaeaea solid; width: 100%;font-size: 0.28rem;">
                <router-link to="/yongjin/yongjindakuan">
                  <div class="flexbc">
                    <div>佣金打款</div>
                    <div><i class="el-icon-arrow-right"></i></div>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </div>

        <div style="background: #fff; padding: 0.3rem; border-radius: 0.2rem; margin-top: 0.2rem;">
          <div class="flex" @click="go('/xitongpeizhi')">
            <div><img src="../../static/img/xitongpeizhi.svg" style="width: 0.35rem; height: 0.35rem;"></div>
            <div style="flex: 1; margin-left: 0.25rem;">
              <div style=" font-size: 0.28rem;">
                <div class="flexbc">
                  <div>系统配置</div>
                  <div><i class="el-icon-arrow-right"></i></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="flexc" @click="go('/index')"  :class="act == 7?'navtitleact':'navtitle'">
          <div><img src="../../static/img/shouye.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
          <div>首页</div>
        </div> -->

      </div>
    </van-popup>
    <!-- <div class="nav">
      <div class="flexc" @click="go('/index')"  :class="act == 7?'navtitleact':'navtitle'">
        <div><img src="../../static/img/shouye.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>首页</div>
      </div>
      <div class="flexc" :class="act == 1?'navtitleact':'navtitle'">
        <div><img src="../../static/img/shangpinguanli.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>商品管理</div>
      </div>
      <div class="navli">
      	<router-link to="/shangpinguanli/gongyingshangshangpin">供应商商品</router-link>
      </div>
      <div class="navli">
      	<router-link to="/shangpinguanli/zaishoushangpin">在售商品</router-link>
      </div>
      <div class="flexc" :class="act == 2?'navtitleact':'navtitle'">
        <div><img src="../../static/img/zhibotuiguang.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>直播推广</div>
      </div>
      <div class="navli">
      	<router-link to="/zhibotuiguang/duoshangpin">多商品页</router-link>
      </div>
      <div class="navli">
      	<router-link to="/zhibotuiguang/danshangpin">单商品页</router-link>
      </div>
      <div class="flexc" @click="go('/fenxiaoshangguanli')"  :class="act == 3?'navtitleact':'navtitle'">
        <div><img src="../../static/img/fenxiaoshangguanli.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>分销商管理</div>
      </div>

      <div class="flexc" :class="act == 4?'navtitleact':'navtitle'">
        <div><img src="../../static/img/dingdanguanli.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>订单管理</div>
      </div>
      <div class="navli">
      	<router-link to="/dingdanguanli/dingdanchuli">我的订单</router-link>
      </div>
      <div class="navli">
      	<router-link to="/dingdanguanli/fenxiaoshangdingdan">分销商订单</router-link>
      </div>

      <div class="flexc" :class="act == 5?'navtitleact':'navtitle'">
        <div><img src="../../static/img/caiwuguanli.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>财务管理</div>
      </div>
      <div class="navli">
      	<router-link to="/yongjin/yongjinguanli">佣金结算订单管理</router-link>
      </div>
      <div class="navli">
      	<router-link to="/yongjin/yongjinjilu">佣金结算记录</router-link>
      </div>
      <div class="navli">
      	<router-link to="/yongjin/yongjindakuan">佣金打款</router-link>
      </div>

      <div class="flexc"  @click="go('/xitongpeizhi')"  :class="act == 6?'navtitleact':'navtitle'">
        <div><img src="../../static/img/xitongpeizhi.svg" style="width: 20px; height: 20px; margin: 0 20px 0 30px;"></div>
        <div>系统配置</div>
      </div>
    </div> -->
	</div>
</template>

<script>
	export default {
		name: 'topandleft',
		data() {
			return {
        show:false
			}
		},
		created() {

      document.title = localStorage.getItem('shop_name')
		},

		mounted() {
      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;
		},
		methods: {
      showPopup:function(){
        this.show = true;
      }
		}
	}
</script>


<style scoped lang="less">
  .router-link-active{ color: #005aff;}

</style>
